<template>
  <div class="search">
    <div class="typeimg" v-on:click="goseek()"><img src="../../static/img/home_type.png"/></div>
    <div class="searchin" v-on:click="gosearchpage()">
      <span></span><img src="../../static/img/home_search.png"/>
    </div>
  </div>
</template>

<script>

export default {
  name: 'search',
  props : [''],
  data () {
    return {
      value:'',
      result:[]
    }
  },
  methods : {
    goseek(){
      this.$router.push({ name: 'seekclass'})
    },
    gosearchpage(){
      this.$router.push({ name: 'searchpage', query: { historypage: 'home' }})
    }
  },
  mounted(){
      
  }
}

</script>

<style lang="scss" scoped>
  $blue:#51b6e1;
  .search{
    z-index: 1;
    display: flex;
    height:40px;
    text-align: center;
    background-color: $blue;
    position:fixed;
    width:100%;
    .searchin{
      text-align: right;
      margin: 5px 20px 5px 0px;
      width: 90%;
      margin-left: 20px;
      position: relative;
      background-color:#ffffff;
      span{
        height:100%;
        display:inline-block;
        vertical-align: middle;

      }
      img{
        width: 20px;
        margin-right: 10px;
        vertical-align: middle;
      }
    }
    .typeimg{
      text-align: left;
      position:relative;
      top: 3px;
      left:10px;
    }
    .searchinput{
      .mint-search{
        position:relative;
      }
    }
  }
</style>
